var chart;
$(document)
		.ready(
				function() {
					$("#selectYear")
							.change(
									function() {
										//alert("aaaaaaa");

										var formInput = $(this).serialize();

										$
												.getJSON(
														'selectYear.action',
														formInput,
														function(data) {

															// tao mang du lieu
															var hh = [];
															$
																	.each(
																			data.dataMap,
																			function(
																					key,
																					value) {
																				hh
																						.push( [
																								key,
																								value ]);
																			});
															var a=[];
															$
															.each(
																	data.arrayList,
																	function(index, value) {
																		a.push(value);
																	});
															//alert(a+" ");

															// bieu do tron
															chart = new Highcharts.Chart(
																	{
																		chart : {
																			renderTo : 'container2',
																			plotBackgroundColor : null,
																			plotBorderWidth : null,
																			plotShadow : false
																		},
																		title : {
																			text : 'Biểu đồ tròn'
																		},
																		tooltip : {
																			formatter : function() {
																				return '<b>'
																						+ this.point.name
																						+ '</b>: '
																						+ this.y
																						+ ' %';
																			}
																		},
																		plotOptions : {
																			pie : {
																				allowPointSelect : true,
																				cursor : 'pointer',
																				dataLabels : {
																					enabled : true,
																					color : '#000000',
																					connectorColor : '#000000',
																					formatter : function() {
																						return '<b>'
																								+ this.point.name
																								+ '</b>: '
																								+ this.y
																								+ ' %';
																					}
																				}
																			}
																		},
																		series : [ {
																			type : 'pie',
																			name : 'Browser share',
																			data : hh
																		} ]
																	});
															// bieu do tru
															chart = new Highcharts.Chart(
																	{
																		chart : {
																			renderTo : 'container3',
																			defaultSeriesType : 'column'
																		},
																		title : {
																			text : 'Biểu đồ cột'
																		},
																		subtitle : {
																			text : 'Số lượng các đơn đặt hàng từng loại xe'
																		},
																		xAxis : {
																			categories : [
																					'Tháng 1',
																					'Tháng 2',
																					'Tháng 3',
																					'Tháng 4',
																					'Tháng 5',
																					'Tháng 6',
																					'Tháng 7',
																					'Tháng 8',
																					'Tháng 9',
																					'Tháng 10',
																					'Tháng 11',
																					'Tháng 12' ]
																		},
																		yAxis : {
																			min : 0,
																			title : {
																				text : 'Số lượng'
																			}
																		},
																		legend : {
																			layout : 'vertical',
																			backgroundColor : '#FFFFFF',
																			align : 'right',
																			verticalAlign : 'top',
																			x : -50,
																			y : -10,
																			floating : true,
																			shadow : true
																		},
																		tooltip : {
																			formatter : function() {
																				return ''
																						+ this.x
																						+ ': '
																						+ this.y
																						+ ' đơn';
																			}
																		},
																		plotOptions : {
																			column : {
																				pointPadding : 0.2,
																				borderWidth : 0
																			}
																		},
																		series : [
																				{
																					name : 'Xe Thể Thao',
																					data : a

																				},
																				{
																					name : 'Xe du lịch',
																					data : a
																				},
																				{
																					name : 'Xe tải',
																					data : a
																				} ]
																	});

														});

										return false;

									});

				});
